<template>
  <!-- 二次封装的table组件 -->
  <tablePaganations
    :tableData="tableData"
    :columns="columns"
    :isSelect="isSelect"
    @changePage="changePage"
    @batch="batch"
  >
    <template v-slot:bodyCell="{ scope }">
      <span v-if="scope.column.key != 'action'">{{ setSlot(scope.column.key, scope.value) }}</span>
      <span v-else>
        <a-button type="primary">编辑</a-button>
        <a-divider type="vertical" />
        <a-button>删除</a-button>
      </span>
    </template>
  </tablePaganations>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import tablePaganations from '@/components/Table/Table.vue'
const tableData = ref<any>({
  data: [
    {
      name: '我又名字',
      key: '1',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer']
    },
    {
      name: '我又名字',
      key: '2',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser']
    },
    {
      key: '3',
      name: '我又名字',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher']
    },
    {
      name: '我又名字',
      key: '1',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer']
    },
    {
      key: '2',
      name: '我又名字',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser']
    },
    {
      key: '3',
      name: '我又名字',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher']
    },
    {
      key: '1',
      name: '我又名字',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer']
    },
    {
      key: '2',
      name: '我又名字',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser']
    },
    {
      key: '3',
      name: '我又名字',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher']
    },
    {
      key: '1',
      name: '我又名字',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer']
    },
    {
      key: '2',
      name: '我又名字',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser']
    },
    {
      key: '3',
      name: '我又名字',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher']
    }
  ],
  total: 3,
  height: 300
})

const columns = ref<any[]>([
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address'
  },
  {
    title: '标签',
    key: 'tags',
    dataIndex: 'tags'
  },
  {
    title: '操作',
    key: 'action'
  }
])

const isSelect = ref<boolean>(true)
const setSlot = (key, value) => {
  return value
}

const changePage = (val): void => {
  //分页器改变返回值
  console.log('changePage', val)
}
const batch = (val): void => {
  //多选改变返回值
  console.log('batch', val)
}
</script>
